<template>
      <div>
            <div class="title">周末去哪儿</div>
            <ul>
                  <li class="item border-bottom" v-for="item of list" :key="item.id">
                        <div class="item-img-wrapper">
                              <img class="item-img" :src="item.imgUrl"/>
                        </div>
                        <div class="item-info">
                              <p class="item-title">{{item.title}}</p>
                              <p class="item-desc">{{item.desc}}</p>
                        </div>
                  </li>
            </ul>
      </div>
</template>

<script>
  export default {
    name: "HomeWeekend",
    props:{
      list:Array
    }
    /*data (){
      return{
        recommendList:[{
          id:'001',
          imgUrl:'https://img1.qunarzz.com/qs/1901/f4/58144f72caf30a02.jpg',
          title:'曼谷七天五夜跟团游',
          desc:'无自费！三站购物！五星酒店！泰国'
        },{
          id:'002',
          imgUrl:'https://img1.qunarzz.com/qs/1901/f4/58144f72caf30a02.jpg',
          title:'曼谷七天五夜跟团游',
          desc:'无自费！三站购物！五星酒店！泰国'
        },{
          id:'003',
          imgUrl:'https://img1.qunarzz.com/qs/1901/f4/58144f72caf30a02.jpg',
          title:'曼谷七天五夜跟团游',
          desc:'无自费！三站购物！五星酒店！泰国'
        }]
      }
    }*/
  }
</script>

<style lang="stylus" scoped>
      @import "../assets/styles/mixins.styl"
      .title
            line-height .8rem
            background #eee
            text-indent .2rem
      .item-img-wrapper
        overflow hidden
        height 0
        padding-bottom 37.09%
        .item-img
          width 100%
      .item-info
            padding .1rem
            .item-title
                  line-height .54rem
                  font-size .32rem
                  ellipse()
            .item-desc
                  line-height .4rem
                  color #ccc
                  ellipse()



</style>